<extend name="Public/base"/>
<block name="style">
	<style type="text/css">
		.history-message{
			padding: 20px;
			font-size: 10px;
		}
		.from-message{
			padding: 5px 0px; 
			color: #0ab7f0;
		}
		.to-message{
			padding: 5px 0px; 
			color: #45bf70;
		}
		.message-text{
			padding: 10px;
			font-size: 14px;
			background: #e4e3e3;
		}
	</style>
</block>
<block name="body">
	<div class="history-message">
		<foreach name="data" item="v">
			<div <if condition="$v['message_from'] eq $message_to">class="from-message"<else />class="to-message"</if>>
				{$v['message_from_name']}: {$v['send_time']|microtime_format='Y-m-d H:i:s',###}
			</div>
			<div class="message-text">
				<if condition="$v['message_payload']['bodies'][0]['type'] eq txt">
					<div class="message">{$v['message_payload']['bodies'][0]['msg']}</div>
				<elseif condition="$v['message_payload']['bodies'][0]['type'] eq img" />
					<img src="{$v['message_payload']['bodies'][0]['url']}">
				</if>
			</div>
		</foreach>
		<div class="page">{$page['page']}</div>
	</div>
	
</block>
<block name="script">

    <script type="text/javascript" src="__JS__/chat/strophe.js"></script>
    <script type="text/javascript">
    	var _EMOJI_PATH = "__IMG__/faces/"; // 表情包地址
    	Emoji = {
		    path: _EMOJI_PATH,
		    map: {
		        '[):]': 'ee_1.png',
		        '[:D]': 'ee_2.png',
		        '[;)]': 'ee_3.png',
		        '[:-o]': 'ee_4.png',
		        '[:p]': 'ee_5.png',
		        '[(H)]': 'ee_6.png',
		        '[:@]': 'ee_7.png',
		        '[:s]': 'ee_8.png',
		        '[:$]': 'ee_9.png',
		        '[:(]': 'ee_10.png',
		        '[:\'(]': 'ee_11.png',
		        '[:|]': 'ee_12.png',
		        '[(a)]': 'ee_13.png',
		        '[8o|]': 'ee_14.png',
		        '[8-|]': 'ee_15.png',
		        '[+o(]': 'ee_16.png',
		        '[&lt;o)]': 'ee_17.png',
		        '[|-)]': 'ee_18.png',
		        '[*-)]': 'ee_19.png',
		        '[:-#]': 'ee_20.png',
		        '[:-*]': 'ee_21.png',
		        '[^o)]': 'ee_22.png',
		        '[8-)]': 'ee_23.png',
		        '[(|)]': 'ee_24.png',
		        '[(u)]': 'ee_25.png',
		        '[(S)]': 'ee_26.png',
		        '[(*)]': 'ee_27.png',
		        '[(#)]': 'ee_28.png',
		        '[(R)]': 'ee_29.png',
		        '[({)]': 'ee_30.png',
		        '[(})]': 'ee_31.png',
		        '[(k)]': 'ee_32.png',
		        '[(F)]': 'ee_33.png',
		        '[(W)]': 'ee_34.png',
		        '[(D)]': 'ee_35.png'
		    }
		}

        function onTextMessage(message){
            // 处理信息
            message = message.replace(/\[(.+?)\]/g, function(m){
                if (typeof(Emoji.map[m]) !== 'undefined') {
                    return '<img src="' + Emoji.path + Emoji.map[m] +'" />';
                } else {
                    return m;
                }
            });
        }

        $(function(){
        	$('.message').html(function(){
        		message = encode($(this).html());
        		message = message.replace(/\[(.+?)\]/g, function(m){
	                if (typeof(Emoji.map[m]) !== 'undefined') {
	                    return '<img src="' + Emoji.path + Emoji.map[m] +'" />';
	                } else {
	                    return m;
	                }
	            });
	            $(this).html(message);
        	})
        })

        function encode(str) {
		    if (!str || str.length === 0) {
		        return '';
		    }
		    var s = '';
		    s = str.replace(/&amp;/g, "&");
		    s = s.replace(/<(?=[^o][^)])/g, "&lt;");
		    s = s.replace(/>/g, "&gt;");
		    s = s.replace(/</g, "&lt;");
		    s = s.replace(/\"/g, "&quot;");
		    s = s.replace(/\n/g, "<br>");
		    return s;
		}
    </script>
</block>